<template>
  <div>
    <van-nav-bar title="房屋管理" left-arrow @click-left="$router.back()" />
    <div class="Rent_houses__1j8z8">
      <div
        class="HouseItem_house__29lYP"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="HouseItem_imgWrap__3ZPoa">
          <img class="HouseItem_img__1BaJK" :src="item.houseImg" alt="" />
        </div>
        <div class="HouseItem_content__1gVhj">
          <h3 class="HouseItem_title__2dXar">{{ item.title }}</h3>
          <div class="HouseItem_desc__5-mp4">{{ item.desc }}</div>
          <div>
            <span class="HouseItem_tag__3MxYv HouseItem_tag1__3VDnD"
             v-for="(itemChild,indexChild) in item.tags" :key="indexChild" >{{itemChild}}</span
            >
          </div>
          <div class="HouseItem_price__1_r8v">
            <span class="HouseItem_priceNum__RGpsE">{{ item.price }}</span>
            元/月
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mylet } from '@/api/user'
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.onSubmit()
  },
  methods: {
    async onSubmit () {
      const { body } = await mylet()
      // console.log("body",body)
      body.forEach(function (item) {
        item.houseImg = 'http://liufusong.top:8080' + item.houseImg
      })
      this.list = body
      // console.log("list",this.list)
    }
  }
}
</script>

<style>
.Rent_houses__1j8z8 {
  padding: 0 10px;
  background-color: #fff;
}
.HouseItem_house__29lYP {
  height: 120px;
  position: relative;
  box-sizing: border-box;
  justify-content: space-around;
  padding-top: 18px;
  border-bottom: 1px solid #e5e5e5;
}
.HouseItem_imgWrap__3ZPoa {
  float: left;
  width: 106px;
  height: 80px;
}
.HouseItem_img__1BaJK {
  width: 106px;
  height: 80px;
}
.HouseItem_content__1gVhj {
  overflow: hidden;
  line-height: 22px;
  padding-left: 12px;
}
.HouseItem_desc__5-mp4,
.HouseItem_title__2dXar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.HouseItem_desc__5-mp4 {
  font-size: 12px;
  color: #afb2b3;
}
.HouseItem_title__2dXar {
  margin: 0;
  font-size: 15px;
  color: #394043;
}
</style>
